<!--
-->
<template>
    <vxe-modal v-model="visible" :height="layout.modalHeight(700)" :min-width="layout.modalMinWidth(800)" :position="{top: '60px'}" :title="title" :width="layout.modalWidth(1100)" destroy-on-close resize show-footer show-maximize @close="cancelClick">
        <el-tabs v-model="state.configType">
            <el-tab-pane :name="1" label="appsettings"/>
            <el-tab-pane :name="2" label="systemconfig"/>
        </el-tabs>
        <vxe-table ref="VXETable" :column-config="{ resizable: false}" :data="currentList" :edit-config="{trigger: 'click', mode: 'cell'}" :height="500" :loading="state.isLoading" :radio-config="{trigger: 'row', highlight: true}" :row-config="{isCurrent: true, isHover: true, keyField: 'id'}" :tree-config="{childrenField: 'children', reserve: true}" border round show-overflow size="small" @current-change="() => {}" @radio-change="() => {}">
            <template #empty>
                <el-empty :image-size="100" />
            </template>
            <vxe-column fixed="left" title="#" type="seq" width="50" />
            <vxe-column field="configType" :fixed="$fixedColumn('left')" title="配置文件类型" width="130">
                <template #default="{row}">
                    <el-tag v-if="row.configType === 1" effect="dark">appsettings</el-tag>
                    <el-tag v-if="row.configType === 2" effect="dark" type="success">systemconfig</el-tag>
                </template>
            </vxe-column>
            <vxe-column field="key" :fixed="$fixedColumn('left')" title="Key" width="200"></vxe-column>
            <vxe-column field="description" min-width="140" title="描述"></vxe-column>
            <vxe-column field="valueType" title="数据类型" width="100">
                <template #default="{row}">
                    <span v-if="row.valueType === 1">字符串</span>
                    <span v-if="row.valueType === 2">bool</span>
                    <span v-if="row.valueType === 3">int</span>
                    <span v-if="row.valueType === 4">float</span>
                    <span v-if="row.valueType === 5">时间</span>
                </template>
            </vxe-column>
            <vxe-column :edit-render="{}" field="value" title="数值" width="250">
                <template #edit="{row}">
                    <el-input v-if="row.valueType === 1" v-model="row.value" />
                    <el-radio-group v-if="row.valueType === 2" v-model="row.value">
                        <el-radio value="false">false</el-radio>
                        <el-radio value="true">true</el-radio>
                    </el-radio-group>
                    <el-input-number v-if="row.valueType === 3" v-model="row.value" controls-position="right" style="width: 100%;" />
                    <el-input-number v-if="row.valueType === 4" v-model="row.value" controls-position="right" style="width: 100%;" />
                    <el-date-picker v-if="row.valueType === 5" v-model="row.value" format="YYYY-MM-DD HH:mm:ss" style="width: 100%;" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" />
                </template>
            </vxe-column>
        </vxe-table>
        <template #footer>
            <el-button @click="cancelClick">取消</el-button>
            <el-button :loading="isSubmitting" type="primary" @click="beforeSubmit">
                确定
            </el-button>
        </template>
    </vxe-modal>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {FormMixins} from "@/utils/FormMixins";
import * as api from "./api.js"


const {ELForm, visible, title, layout, isLoading, isSubmitting, state, setOptions, submitSuccess, cancelClick} = FormMixins();
const {$message, $fixedColumn} = window;

const currentList = computed(() => state.list?.filter(item => item.configType === state.configType))
state.configType = 1

const Model = () => {
    return {}
}

// 表单显示
async function show(config) {
    setOptions(config);
    state.model = Model();
    state.model = {...state.model, ...state.options}
    api.GetPCProgConfig({id: state.model.id}).then(({data}) => {
        state.list = (data || []).map(item => {
            if (item.value !== null && item.value !== undefined) {
                // 字符串
                if (item.valueType === 1) {}
                // bool
                if (item.valueType === 2) {}
                // int
                if (item.valueType === 3) {
                    item.value = parseInt(item.value)
                }
                // float
                if (item.valueType === 4) {
                    item.value = parseFloat(item.value)
                }
                // 时间
                if (item.valueType === 5) {}
            }
            return item
        })
    })
}


// 校验表单
async function beforeSubmit() {
    isSubmitting.value = true
    await $sleep(1000)
    state.list = state.list.map(item => {
        if (item.value !== null && item.value !== undefined) {
            // 字符串
            if (item.valueType === 1) {}
            // bool
            if (item.valueType === 2) {
                item.value += ""
            }
            // int
            if (item.valueType === 3) {
                item.value = parseInt(item.value)
            }
            // float
            if (item.valueType === 4) {
                item.value = parseFloat(item.value)
            }
            // 时间
            if (item.valueType === 5) {}
        }
        return item
    })
    submit()
}

// 提交表单
async function submit() {
    isSubmitting.value = true
    console.log("submit: ", state.model)
    const body = {
        computerProgramId: state.model.id,
        configInputs: state.list
    }
    const {success, data} = await api.UpdatePCProgConfig(body);
    isSubmitting.value = false
    if (!success) return 0;
    $message.success("操作成功")
    submitSuccess()
}

onMounted(() => {
})
defineExpose({
    show
})
</script>


<style lang="scss" scoped>
.EditForm {

}
</style>
